<template>
<keep-alive>
    <div class="retiu0004" ref="beijin" :style="value">
        retiu0004 <input type="color" class="a" ref="beijins" id="v">
        <button @click="a" :style="value">更换背景颜色</button>
        <div class="input">
            <form action="/" target="blank" name="aaa">
                用户名<input type="text" name="uz" placeholder="最多输入20位" maxlength="20" v-model="inputvalue">
                密码<input type="password" name="password" placeholder="最多输入9位" maxlength="9" v-model="xx">

                <input type="file" multiple="multiple" id="toux">
                <input type="file" accept="png">

                <input type="search" placeholder="请输入关键字">
                <h3>性别</h3>
                男
                <input type="radio" name="nan">
                女
                <input type="radio" name="nan">

                <h3>爱好</h3>
                音乐
                <input type="checkbox" name="aih">
                游泳
                <input type="checkbox" name="aih">
                放屁
                <input type="checkbox" name="aih">
                <select>
                    <option value="h5">h9</option>
                    <option value="h5">h8</option>
                    <option value="h5">h7</option>
                    <option value="h5">h6</option>
                </select>
                <input type="submit" width="50px">
            </form>
            <button class="baoc" @click="baoc">保存</button>
            <div class="show" v-show="show">
                <div>是否保存账号密码</div>
                <span @click="no">no</span>
                <span @click="yes">yes</span>
            </div>
        </div>
        <div class="hs">
            <div class="cs" id="l"></div>
            <div class="cs"></div>
            <div class="cs"></div>
            <div class="cs"></div>
            <div class="cs"></div>
            <button @click="shuax">刷新页面</button>
        </div>
    </div>
</keep-alive>
</template>

<script>
export default {
    name: 'retiu0004',
    data() {
        return {
            show: false,
            inputvalue: localStorage.c,
            value: '',
            xx: "",
            b: "dfoaldkljgooooo",
            g: []
        }
    },
    watch: {

        toux() {

            if (toux) {
                console.log(toux[0])

            }
        }

    },
    created() {
        let toux = document.getElementById("toux").files

    },
    mounted() {

        // console.log(toux.HTMLInputElement.files[0])

        if (this.$router.history.current.path == "/retiu") {

        } else {

        }

        console.log(this.$router)
        // alert(this.b.indexOf("o"))
        // alert(this.b.match("o"))
        // let a = this.g.splice(0, 1, "1", "2")

        // alert(this.g)
        console.log(location.href + ":整个URL") //整个URL
        console.log(location.protocol + ":协议") //协议
        console.log(location.hostname + ":主机名  域名/IP") //主机名  域名/IP
        console.log(location.port + ":端口号") // 端口号
        console.log(location.pathname + ":路径名") //路径名
        console.log(location.search + ":查询字符串跟在？号后面的部分") //查询字符串跟在？号后面的部分
        console.log(location.hash + ":#锚点") //#锚点
        // location.search = "?djkfjlsdjfl65654556kja"
        // document.cookie("name","xiaoli",1)
        // localStorage.a = this.inputvalue
        localStorage.set = this.g

        // alert(b)
        localStorage.removeItem("inputvalue")
    },
    watch: {
        inputvalue() {

        }
    },
    methods: {
        no() {
            this.show = false
        },
        yes() {
            localStorage.c = this.inputvalue
            this.show = false

        },
        baoc() {
            this.show = true
        },
        a() {
            let beijins = this.$refs.beijins.value
            this.value = "background-color:" + beijins
        },
        shuax() {

            location.reload()
            console.log(typeof (this.g))
        }
    },

}
</script>

<style scoped>
.retiu0004 {
    position: relative;
    top: 100px;
    width: 100%;
    height: 200px;
    background-color: rgb(173, 59, 59);

}

.input {
    position: relative;
    top: 250px;
    width: 100%;
    background-color: #fff;

}

.baoc {
    position: absolute;
    top: 20px;
    right: -50px;
    width: 10%;
    height: 20px;

}

.a {
    width: 35px;
    height: 35px;
    border-radius: 19px;
    position: absolute;
    bottom: -50px;
    background-color: rgb(165, 158, 158);
    padding: 2px;
}

input {
    border: coral 1px solid;
}

button {
    position: relative;
    bottom: -200px;
    left: 220px;
    background-color: rgb(77, 18, 18);
    color: rgb(255, 254, 254);
    width: 100px;
    border-radius: 10px;
}

.show {
    position: fixed;
    top: 50%;
    left: 25%;
    height: 70px;
    width: 200px;
    background-color: rgb(211, 210, 210);
    text-align: center;
}

.show div {
    margin: 10px 0px 20px;
}

.show span {
    display: inline-block;
    width: 50px;
    height: 18px;
    background-color: rgb(196, 72, 72);
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
}
</style>
